<template>
  <div class="row">
    <div class="col-md-12">
      <div class="box box-primary">
        <div class="box-body with-border no-padding"  style="overflow: hidden;" :style="{height: mapHeight}">
          <div class="search-box" :class="{h:!isSearching}">
            <div class="search-input">
              <input type="text" @keydown.enter="handleSearch" v-model="searchValue" placeholder="输入桥名进行搜索">
              <i v-if="isSearching" class="fa fa-close" @click="handleClose"></i>
              <i class="fa fa-search" @click="handleSearch"></i>
            </div>

            <div class="search-result">
              <ul :class="{h:!isSearching}">
                <li v-if="this.searchResult.length === 0">未检索到相关桥梁</li>
                <li v-for="item of this.searchResult" :key="item.id" @mouseenter="handleHover(item)" @click="openBridgeInfoDialog(item.id, item.sidePath, item.frontPath)">
                  <img :src="getImgUrl(item.sidePath)">
                  <div class="search-content">
                    <section>{{item.name}}</section>
                    <section>{{item.unitsName}}</section>
                    <section>{{item.bridgeCategory}}</section>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div id="bridgeMap" style="height: 110%;"></div>
        </div>
      </div>
    </div>

    <Modal v-model="bridgeInfo" width="45%" :closable="false">
      <Spin v-if="isBridgeCardLoading" size="large" fix></Spin>
      <Tabs>
        <TabPane :label="bridgeCard.bridgeName + '基本信息'">
          <table class="bridge-card-table">
            <tbody>
            <!--行政识别信息-->
            <tr>
              <th colspan="9" style="font-size: 14px;text-align: left; padding-left:16px;">A：行政识别数据</th>
            </tr>
            <tr>
              <th class="no">1</th>
              <th>路线编号</th>
              <td>{{bridgeCard.roadNo}}</td>
              <th>2</th>
              <th>路线名</th>
              <td>{{bridgeCard.roadName}}</td>
              <th>3</th>
              <th>路线等级</th>
              <td>{{bridgeCard.roadLevel}}</td>
            </tr>
            <tr>
              <th>4</th>
              <th>桥梁编号</th>
              <td>/</td>
              <th>5</th>
              <th>桥梁名称</th>
              <td>{{bridgeCard.bridgeName}} </td>
              <th>6</th>
              <th>桥位桩号</th>
              <td>{{bridgeCard.stakeNo}}</td>
            </tr>
            <tr>
              <th>7</th>
              <th>功能类型</th>
              <td>{{bridgeCard.functionType}}</td>
              <th>8</th>
              <th>下穿通道名</th>
              <td>{{bridgeCard.dncrossName}}</td>
              <th>9</th>
              <th>下穿通道桩号</th>
              <td>{{bridgeCard.dbcrossStakeNo}}</td>
            </tr>
            <tr>
              <th>10</th>
              <th>设计荷载</th>
              <td>{{bridgeCard.designLoad}}</td>
              <th>11</th>
              <th>通行载重</th>
              <td>{{bridgeCard.loadCapacity}}</td>
              <th>12</th>
              <th>弯斜坡度</th>
              <td>{{bridgeCard.slop}}</td>
            </tr>
            <tr>
              <th>13</th>
              <th>桥面铺装</th>
              <td>{{bridgeCard.deckPavement}}</td>
              <th>14</th>
              <th>管养单位</th>
              <td>{{bridgeCard.units}}</td>
              <th>15</th>
              <th>建成年限</th>
              <td>{{bridgeCard.buildDate}}</td>
            </tr>
            <!--结构技术数据-->
            <tr>
              <th colspan="9" style="font-size: 14px;text-align: left; padding-left:16px;">B：结构技术数据</th>
            </tr>
            <tr>
              <th>16</th>
              <th>桥长(m)</th>
              <td>{{bridgeCard.bridgeLength}}</td>
              <th>17</th>
              <th>桥面总宽(m)</th>
              <td>{{bridgeCard.deckTotalWidth}}</td>
              <th>18</th>
              <th>车行道宽(m)</th>
              <td>{{bridgeCard.laneWidth}}</td>
            </tr>
            <tr>
              <th>19</th>
              <th>桥面标高(m)</th>
              <td>{{bridgeCard.deckEvaluation}}</td>
              <th>20</th>
              <th>桥下净高(m)</th>
              <td>{{bridgeCard.subClearHeight}}</td>
              <th>21</th>
              <th>桥上净高(m)</th>
              <td>{{bridgeCard.superClearHeight}}</td>
            </tr>
            <tr>
              <th>22</th>
              <th>引道总宽(m)</th>
              <td>{{bridgeCard.accessTotalWidth}}</td>
              <th>23</th>
              <th>引道路面宽(m)</th>
              <td>{{bridgeCard.accessRoadWidth}}</td>
              <th>24</th>
              <th>引道线形</th>
              <td>{{bridgeCard.accessLinearName}}</td>
            </tr>
            <tr>
              <td colspan="9">
                <table class="bridge-card-table">
                  <tbody>
                  <tr>
                    <th class="no" rowspan="4">上部结构</th>
                    <th class="no">25</th>
                    <th style="width: 120px;">跨径组合</th>
                    <td style="width: 280px;overflow: hidden;text-overflow: ellipsis; white-space: nowrap">{{bridgeCard.bridgeSpanCombination}}</td>
                    <th class="no" rowspan="4">下部结构</th>
                    <th class="no">29</th>
                    <th style="width: 120px;">桥墩形式</th>
                    <td>{{bridgeCard.pierType}}</td>
                  </tr>
                  <tr>
                    <th class="no">26</th>
                    <th style="width: 120px;">上部结构类型</th>
                    <td>{{bridgeCard.superstructureType}}</td>
                    <th class="no">30</th>
                    <th style="width: 120px;">桥台形式</th>
                    <td>{{bridgeCard.abutmentType}}</td>
                  </tr>
                  <tr>
                    <th class="no">27</th>
                    <th style="width: 120px;">最大跨径(m)</th>
                    <td>{{bridgeCard.maxSpan}}</td>
                    <th class="no">31</th>
                    <th style="width: 120px;">墩台材料</th>
                    <td>{{bridgeCard.abutmentMaterial}}</td>
                  </tr>
                  <tr>
                    <th class="no">28</th>
                    <th style="width: 120px;">上部结构材料</th>
                    <td>{{bridgeCard.superstructureMaterial}}</td>
                    <th class="no">32</th>
                    <th style="width: 120px;">基础形式</th>
                    <td>桩柱式基础</td>
                  </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <th>33</th>
              <th>伸缩缝类型</th>
              <td>{{bridgeCard.expansionType}}</td>
              <th>34</th>
              <th>支座形式</th>
              <td>{{bridgeCard.supportType}}</td>
              <th>35</th>
              <th>地震动峰值<br/>加速度系数</th>
              <td>/</td>
            </tr>
            <tr>
              <th>36</th>
              <th>桥台护坡</th>
              <td>/</td>
              <th>37</th>
              <th>护墩体</th>
              <td>/</td>
              <th>38</th>
              <th>调治构造物</th>
              <td>/</td>
            </tr>
            <tr>
              <th>39</th>
              <th>常水位</th>
              <td>{{bridgeCard.normalWaterLevel}}</td>
              <th>40</th>
              <th>设计水位</th>
              <td>{{bridgeCard.designWaterLevel}}</td>
              <th>41</th>
              <th>历史洪水位</th>
              <td>{{bridgeCard.historyFloodLevel}}</td>
            </tr>
            <!--档案资料信息-->
            <tr>
              <th colspan="9" style="font-size: 14px;text-align: left; padding-left:16px;">C：档案资料（全、不全或无）</th>
            </tr>
            <tr>
              <th>42</th>
              <th>设计图纸</th>
              <td>/</td>
              <th>43</th>
              <th>设计文件</th>
              <td>/</td>
              <th>44</th>
              <th>施工文件</th>
              <td>/</td>
            </tr>
            <tr>
              <th>45</th>
              <th>竣工图纸</th>
              <td>/</td>
              <th>46</th>
              <th>验收文件</th>
              <td>/</td>
              <th>47</th>
              <th>行政文件</th>
              <td>/</td>
            </tr>
            <tr>
              <th>48</th>
              <th>定期检查报告</th>
              <td>/</td>
              <th>49</th>
              <th>特殊检查报告</th>
              <td>/</td>
              <th>50</th>
              <th>历次维修资料</th>
              <td>/</td>
            </tr>
            <tr>
              <th>51</th>
              <th>档案号</th>
              <td>/</td>
              <th>52</th>
              <th>存档案</th>
              <td>/</td>
              <th>53</th>
              <th>建档年/月</th>
              <td>/</td>
            </tr>
            <tr>
              <td colspan="9">
                <table class="bridge-card-table">
                  <tbody>
                  <!--最近技术状况评定-->
                  <tr>
                    <th colspan="11" style="font-size: 14px;text-align: left; padding-left:16px;">D：最近技术状况评定</th>
                  </tr>
                  <tr>
                    <th>54</th>
                    <th>55</th>
                    <th>56</th>
                    <th>57</th>
                    <th>58</th>
                    <th>59</th>
                    <th>60</th>
                    <th>61</th>
                    <th>62</th>
                    <th>63</th>
                  </tr>
                  <tr>
                    <th>检查年月</th>
                    <th>定期或特殊检查</th>
                    <th>桥幅</th>
                    <th>上部结构类型</th>
                    <th>评定等级</th>
                    <th>上部结构</th>
                    <th>下部结构</th>
                    <th>桥面系</th>
                    <th>处治对策</th>
                    <th>下次检查年份</th>
                  </tr>
                  <tr v-for="e of bridgeCard.bridgeEvaluationList">
                    <td>{{e.createDate.substr(0, 7)}}</td>
                    <td>{{e.taskTypeName}}</td>
                    <td>{{e.sideTypeName === '单幅' ? "全桥" : e.sideTypeName}}</td>
                    <td>{{e.superstructureTypeName}}</td>
                    <td>{{e.sideLevel}}类</td>
                    <td>{{e.superPoint}}分</td>
                    <td>{{e.subPoint}}分</td>
                    <td>{{e.deckPoint}}分</td>
                    <td>{{getMaintainMethod(e.sideLevel)}}</td>
                    <td>{{getNextYear(e.createDate)}}</td>
                  </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td colspan="9">
                <table class="bridge-card-table">
                  <tbody>
                  <!--维修工程记录-->
                  <tr>
                    <th colspan="22" style="font-size: 14px;text-align: left; padding-left:16px;">E：维修工程记录</th>
                  </tr>
                  <tr>
                    <th>65</th>
                    <th>施工日期</th>
                    <th rowspan="2">66</th>
                    <th rowspan="2">修建类别</th>
                    <th rowspan="2">67</th>
                    <th rowspan="2">修建原因</th>
                    <th rowspan="2">68</th>
                    <th rowspan="2">工程范围</th>
                    <th rowspan="2">69</th>
                    <th rowspan="2">工程费用（万元）</th>
                    <th rowspan="2">70</th>
                    <th rowspan="2">经费来源</th>
                    <th rowspan="2">71</th>
                    <th rowspan="2">质量评定</th>
                    <th rowspan="2">72</th>
                    <th rowspan="2">建设单位</th>
                    <th rowspan="2">74</th>
                    <th rowspan="2">设计单位</th>
                    <th rowspan="2">75</th>
                    <th rowspan="2">施工单位</th>
                    <th rowspan="2">76</th>
                    <th rowspan="2">监理单位</th>
                  </tr>
                  <tr>
                    <th>开工</th>
                    <th>竣工</th>
                  </tr>
                  <tr v-if="!bridgeCard.bridgeRecordList || bridgeCard.bridgeRecordList.length === 0">
                    <td>/</td>
                    <td>/</td>
                    <td colspan="2">/</td>
                    <td colspan="2">/</td>
                    <td colspan="2">/</td>
                    <td colspan="2">/</td>
                    <td colspan="2">/</td>
                    <td colspan="2">/</td>
                    <td colspan="2">/</td>
                    <td colspan="2">/</td>
                    <td colspan="2">/</td>
                    <td colspan="2">/</td>
                  </tr>
                  <tr v-for="r of bridgeCard.bridgeRecordList">
                    <td>{{r.commencementDateStr}}</td>
                    <td>{{r.completionDateStr}}</td>
                    <td>{{r.buildTypeName}}</td>
                    <td>{{r.buildReason}}</td>
                    <td>{{r.projectRange}}</td>
                    <td>{{r.projectCost}}</td>
                    <td>{{r.financialSupport}}</td>
                    <td>{{r.qualityEvaluation}}</td>
                    <td>{{r.buildUnit}}</td>
                    <td>{{r.designUnit}}</td>
                    <td>{{r.constructionUnit}}</td>
                    <td>{{r.supervisionUnit}}</td>
                  </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td colspan="9">
                <table class="bridge-card-table">
                  <tbody>
                  <tr>
                    <th>F</th>
                    <th>桥梁照片</th>
                    <th>77</th>
                    <th>立面照</th>
                    <td><img width="230" :src="getImgUrl(bridgeCard.sidePath)"></td>
                    <th>78</th>
                    <th>正面照</th>
                    <td><img width="230" :src="getImgUrl(bridgeCard.frontPath)"></td>
                  </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            </tbody>
          </table>
        </TabPane>

        <!--历史检查信息-->
        <TabPane :label="bridgeCard.bridgeName + '历史检查信息'">
          <h4 v-if="!inspectionResultList || inspectionResultList.length === 0">无检测结果</h4>
          <ul v-show="!!inspectionResultList && inspectionResultList.length > 0" class="timeline">
            <template v-for="item of inspectionResultList">
              <li class="time-label">
              <span class="bg-red">
                {{item.inspectionDate}}
              </span>
              </li>
              <li>
                <i class="fa fa-flag" :class="{
              'bg-aqua':item.bridgeLevel === 1,
              'bg-blue':item.bridgeLevel === 2,
              'bg-yellow':item.bridgeLevel === 3,
              'bg-orange':item.bridgeLevel === 4,
              'bg-red':item.bridgeLevel === 5,
              }"></i>
                <div class="timeline-item">
                  <h3 class="timeline-header"><b>桥梁技术状况等级：{{!!item.bridgeLevel?item.bridgeLevel+'类':'未评级'}}</b></h3>
                  <div class="timeline-body">
                    <img :src="getImgUrl(item.frontPath)" width="150" height="100" alt="正面照缺失" class="margin">
                    <img :src="getImgUrl(item.sidePath)" width="150" height="100"  alt="侧面照缺失" class="margin">
                    <img :src="getImgUrl(item.upwardPath)" width="150" height="100"  alt="仰视照缺失" class="margin" onerror="this.style.display = 'none'">
                    <div style="line-height: 1em;">
                      <p>
                        <span style="font-weight: bold">检测负责人：</span>{{item.manager}}
                        <span style="font-weight: bold; margin-left: 16px;">检测人员：</span>{{item.inspector}}
                        <span style="font-weight: bold; margin-left: 16px;">结束时间：</span>{{item.endDate}}
                      </p>
                      <template v-for="e of item.bridgeEvaluationList">
                        <p class="evaluation-side-desc"><b>{{e.sideTypeName+'('+e.superstructureTypeName+')'+'：'+(e.evaluationType === 0?'综合评分：'+e.sidePoint+' / ':'调整评分：')+e.sideLevel+'类'}}</b></p>
                        <p class="evaluation-desc">上部：{{pointToLevel(e.superPoint)}}，主要病害：{{e.superMainDisease}}</p>
                        <p class="evaluation-desc">下部：{{pointToLevel(e.subPoint)}}，主要病害：{{e.subMainDisease}}</p>
                        <p class="evaluation-desc">桥面：{{pointToLevel(e.deckPoint)}}，主要病害：{{e.deckMainDisease}}</p>
                      </template>
                    </div>
                  </div>
                </div>
              </li>
            </template>
            <li>
              <i class="fa fa-clock-o bg-gray"></i>
            </li>
          </ul>
        </TabPane>
      </Tabs>
    </Modal>
  </div>
</template>

<script>
  import "../../echarts/extension/bmap/bmap";
  import echarts from "../../echarts";
  import {appendRequestParam, doGet} from "../../assets/js/utils/RequestUtils";
  import {getBridgeMapOption} from "../../assets/js/plugin/map/mapOptions";
  import {pointToLevel} from "../../assets/js/utils/EvaluationUtils";
  import {CONTEXT_PATH} from "../../assets/js/global";

  /** 首页数据加载地址 */
  const BRIDGE_MAP_URL = "/home/getHomeData";
  const BRIDGE_CARD_URL = "/home/getBridgeCardInfo";
  const INSPECTION_RESULT_URL = "/home/getInspectionResultList";
  const IMG_URL = "/home/getBridgePhoto";

  export default {
    data() {
      return {
        //echarts图表
        bridgeMap:null,
        bridgeInfo:false,
        bridgeCard:{bridgeName:""},
        isBridgeCardLoading:false,
        mapHeight:(document.body.clientHeight-170) + 'px',
        inspectionResultList: [],
        isSearching: false,
        searchValue:"",
        bridgeData:[],
        searchResult:[],
        center:[119.618804,31.927062],
      }
    },
    methods:{
      getMaintainMethod(level) {
        switch (level) {
          case 2:
            return "需进行小修";
          case 3:
            return "需进行中修，酌情进行交通管制";
          case 4:
            return "需进行大修或改造，及时进行交通管制，如限载、限速通过，当缺损较严重时应关闭交通";
          case 5:
            return "需要进行改建或重建，及时关闭交通";
          default:
            return "进行正常保养";
        }
      },
      getNextYear(str) {
        return parseInt(str.substr(0, 4)) + 1;
      },
      handleHover(item) {
        this.bridgeMap.setOption(getBridgeMapOption({bridgeMapData: this.searchResult, bridgeCategoryData: this.bridgeData.bridgeCategoryData},
          {center: this.center, zoom : 12},
          item));
      },
      handleClose() {
        this.searchValue = "";
        this.isSearching = false;
        this.bridgeMap.setOption(getBridgeMapOption(this.bridgeData));
      },
      handleSearch(e) {
        this.searchResult = this.bridgeData.bridgeMapData.filter(d => {
          let reg = new RegExp(".*"+this.searchValue+".*", "g");
          return reg.test(d.name) || reg.test(d.bridgeCategory) || reg.test(d.roadNo) || reg.test(d.unitsName);
        });
        this.isSearching = true;
        if (this.searchResult.length > 0) this.center = [this.searchResult[0].longitude, this.searchResult[0].latitude];
        this.bridgeMap.setOption(getBridgeMapOption({
          bridgeMapData: this.searchResult,
          bridgeCategoryData: this.bridgeData.bridgeCategoryData}, {center: this.center, zoom : 12}));
      },
      getImgUrl(path) {
        let url = appendRequestParam(CONTEXT_PATH + IMG_URL, "tokenId", localStorage.getItem("tokenId"));
        return appendRequestParam(url, "path", path);
      },
      initCharts() {
        this.bridgeMap = echarts.init(document.getElementById("bridgeMap"));
        this.bridgeMap.on("click", p => {
          if(p.componentType === "series" && (p.seriesType === "scatter" || p.seriesType === "effectScatter")) {
            this.openBridgeInfoDialog(p.data.value[3], p.data.value[5], p.data.value[6]);
          }
        });
      },
      openBridgeInfoDialog(bridgeId, sidePath, frontPath) {
        this.bridgeInfo = true;
        this.isBridgeCardLoading = true;
        doGet(BRIDGE_CARD_URL, {component:this, data:{bridgeId}}).then(response=>this.bridgeCard = {...response, sidePath, frontPath});
        doGet(INSPECTION_RESULT_URL, {data:{bridgeId}, component:this}).then(response=>this.inspectionResultList = response).finally(()=>this.isBridgeCardLoading = false);
      },
      fetchBridgeMapData() {
        this.bridgeMap.showLoading();
        doGet(BRIDGE_MAP_URL, {component:this})
          .then(response=>{
            this.bridgeMap.setOption(getBridgeMapOption(response));
            this.bridgeData = response;
          }).finally(()=>this.bridgeMap.hideLoading());
      },
      pointToLevel
    },
    mounted() {
      this.initCharts();
      this.fetchBridgeMapData();
    }
  }
</script>

<style>
  table.bridge-card-table {
    width: 100%;
    font-size: 12px;
    border-spacing: 0;
    border-left: 1px solid #e9eaec;
    border-bottom: 1px solid #e9eaec;
  }

  table.bridge-card-table th.no {
    width: 24px;
  }

  table.bridge-card-table tr th {
    background-color: #f8f8f9;
  }

  table.bridge-card-table tr td,table.bridge-card-table tr th {
    height: 32px;
    border: 1px solid #e9eaec;
    border-left: none;
    border-bottom: none;
    text-align: center;
  }

  .search-box {
    position: absolute;
    width: 320px;
    height: 100%;
    margin: 16px 0 0 16px;
    z-index: 1;
  }

  .search-box.h {
    height: 32px;
  }

  .search-input > input {
    display: block;
    width: 100%;
    height: 32px;
    outline: none;
    border: none;
    padding: 3px 96px 3px 8px;
    transition: all .5s;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
  }

  .search-input > input:focus {
    box-shadow: 3px 3px 12px 0 rgba(0, 0, 0, 0.5);
  }

  .search-input > i {
    position: absolute;
    top: 0;
    width: 48px;
    line-height: 32px;
    text-align: center;
  }

  .search-input > i.fa-search {
    right: 0;
    color: #ffffff;
    background: #2e77e5;
    cursor: pointer;
  }

  .search-input > i.fa-close {
    right: 48px;
    color: #cccccc;
    background: transparent;
    border-left: 1px solid #eeeeee;
    cursor: pointer;
  }

  .search-result {
    height: 100%;
    margin-top: 32px;
    padding-right: 48px;
    background-color: transparent;
  }

  .search-result > ul {
    visibility: visible;
    max-height: 80%;
    background: #ffffff;
    box-shadow: 3px 3px 12px 0 rgba(0, 0, 0, 0.5);
    padding: 4px 0 4px 4px;
    overflow-y: auto;
    transition: all .5s;
  }

  .search-result > ul.h {
    visibility: hidden;
    max-height: 0;
    opacity: 0;
  }

  .search-result > ul::-webkit-scrollbar {
    width: 6px;
    background: transparent;
  }

  .search-result > ul::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #cccccc;
  }

  .search-result li {
    list-style: none;
    margin-bottom: 4px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .search-result li:last-child {
    margin-bottom: 0;
  }

  .search-result li:hover {
    background: #f6f6f6;
  }

  .search-result li img {
    float: left;
    width: 80px;
    height: 60px;
    vertical-align: middle;
  }

  .search-result li div.search-content {
    display: inline-block;
    margin-left: 8px;
    line-height: 1.5;
    font-size: 12px;
  }
</style>



// WEBPACK FOOTER //
// Home.vue?a4c5529a
